<template>
  <view class="container">
    <view class="idiom-box">
      <uni-badge
        v-if="showPage"
        class="uni-badge-left-margin"
        :text="`${page} / ${idiomList?.length}`"
        type="primary"
      />
      <view class="idiom-text">
        <text>{{ idiomList?.[index]?.word }}</text>
        <view class="pinyin">{{ idiomList?.[index].pinyin }}</view>
      </view>

      <uni-section title="解释" type="line">
        <uni-card>
          <text class="uni-body">{{ idiomList?.[index].explanation }}</text>
        </uni-card>
      </uni-section>
      <uni-section title="实例" type="line">
        <uni-card>
          <text class="uni-body">{{ idiomList?.[index].example }}</text>
        </uni-card>
      </uni-section>

      <!-- <uni-section title="出自" type="line">
        <uni-card>
          <text class="uni-body">{{ iomList[index].derivation }}</text>
        </uni-card>
      </uni-section> -->
    </view>
  </view>
</template>

<script setup lang="ts">
import { watch } from 'vue'
import { ref } from 'vue'

const props = withDefaults(
  defineProps<{
    showPage: boolean
    page: number
    idiomList: IdiomListType[] | undefined
    studyId: number[]
  }>(),
  {
    showPage: false,
    page: 1,
  },
)

const index = ref(0)
watch(
  () => props.page,
  () => {
    index.value = props.page - 1
  },
  {
    deep: true,
    immediate: true,
  },
)
</script>

<style lang="scss" scoped>
.idiom-box {
  width: 100%;
  height: 100%;
  background-color: #fff;
  margin-top: 20rpx;
  border-radius: 20rpx;

  .idiom-text {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    > text {
      font-size: 1.5rem;
      font-weight: 700;
    }

    > .pinyin {
      margin-top: 10rpx;
    }
  }

  .idiom-meaning-box {
    width: 100%;
    margin-top: 50rpx;
  }
}
</style>
